<script>
export default {
  data(){
    return {

      stu: {
        username : 'Alipay',
        age : 1800,
        sex : 'f',
        hobby : [],
        couple : []
      }
      
    }
  },
  methods : {
    btnSave(){
      console.log(this.stu);
    }
  }
}

</script>

<template>
  <div>
    <form>
      <table>
        <tr>
          <td><label for="">用户名：</label></td>
          <td><input type="text" v-model = "stu.username"></td>
        </tr>
        <tr>
          <td><label for="">年龄：</label></td>
          <td><input type="text" v-model = "stu.age"></td>
        </tr>
        <tr>
          <td><label for="">性别：</label></td>
          <td>
            <input type="radio" name = "nn" v-model = "stu.sex" value = "m">男
            <input type="radio" name = "nn" v-model = "stu.sex" value = "f">女
          </td>
        </tr>
        <tr>
          <td><label for="">爱好：</label></td>
          <td>
            <input type="checkbox" v-model = "stu.hobby" value="bb">篮球
            <input type="checkbox" v-model = "stu.hobby" value="fb">足球
            <input type="checkbox" v-model = "stu.hobby" value="cc">编程
            <input type="checkbox" v-model = "stu.hobby" value="ss">唱歌
            <input type="checkbox" v-model = "stu.hobby" value="dd">跳舞
            <input type="checkbox" v-model = "stu.hobby" value="pp">乒乓球
            <input type="checkbox" v-model = "stu.hobby" value="Genshin impact">提瓦特！
          </td>
        </tr>
        <tr>
          <td><label for="">配偶：</label></td>
          <td>
            <select v-model = "stu.couple" multiple>
              <option value="1">老婆一号</option>
              <option value="2">老婆二号</option>
              <option value="3">老婆三号</option>
              <option value="4">老婆四号</option>
              <option value="5">老婆五号</option>
              <option value="6">老婆六号</option>
              <option value="7">老婆七号</option>
              <option value="8">老婆八号</option>
              <option value="xzz">王斌</option>
            </select>
          </td>
        </tr>
      </table>
    </form>
    <input type="button" value="保存" @click="btnSave">
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
